<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="${pageContext.request.contextPath }/assets/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="${pageContext.request.contextPath }/css/style.css"/>       
        <link href="${pageContext.request.contextPath }/assets/css/codemirror.css" rel="stylesheet">
        <link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/ace.min.css" />
        <link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/font-awesome.min.css" />
        <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
		<!--[if IE 7]>
		  <link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/font-awesome-ie7.min.css" />
		<![endif]-->
        <!--[if lte IE 8]>
		  <link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/ace-ie.min.css" />
		<![endif]-->
			<script src="${pageContext.request.contextPath }/assets/js/jquery.min.js"></script>

		<!-- <![endif]-->

		<!--[if IE]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<![endif]-->

		<!--[if !IE]> -->

		<script type="text/javascript">
			window.jQuery || document.write("<script src='${pageContext.request.contextPath }/assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
		</script>

		<!-- <![endif]-->

		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='${pageContext.request.contextPath }/assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
		
		<script type="text/javascript">
			if("ontouchend" in document) document.write("<script src='${pageContext.request.contextPath }/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="${pageContext.request.contextPath }/assets/js/bootstrap.min.js"></script>
		<script src="${pageContext.request.contextPath }/assets/js/typeahead-bs2.min.js"></script>
		<!-- page specific plugin scripts -->
<%-- 		<script src="${pageContext.request.contextPath }/assets/js/jquery.dataTables.min.js"></script>
		<script src="${pageContext.request.contextPath }/assets/js/jquery.dataTables.bootstrap.js"></script> --%>
        <script type="text/javascript" src="${pageContext.request.contextPath }/js/H-ui.js"></script> 
        <script type="text/javascript" src="${pageContext.request.contextPath }/js/H-ui.admin.js"></script> 
        <script src="${pageContext.request.contextPath }/assets/layer/layer.js" type="text/javascript" ></script>
        <script src="${pageContext.request.contextPath }/assets/laydate/laydate.js" type="text/javascript"></script>
<title>用户列表</title>
<script type="text/javascript">
	$(function(){
		//全选全不选
		
		$("#checkAll").click(
		  function(){
		   $("input[name='typeId']").prop("checked",this.checked);
		  }
		);
	});
</script>

</head>

<body>
<div class="page-content clearfix">
    <div id="Member_Ratings">
      <div class="d_Confirm_Order_style">
    <div class="search_style">
      <div class="title_names">搜索查询</div>
      <form id="ajaxFrm">
      <ul class="search_content clearfix">
       <li><label class="l_f">会员名称</label><input name="customer_name" type="text"  class="text_add" placeholder="输入会员编号"  style=" width:400px"/></li>
       <li><input class="inline laydate-icon" id="start" style=" margin-left:10px;" type="hidden"/></li>
       <li style="width:90px;"><button type="button" class="btn_search" onclick="doFind()"><i class="icon-search"></i>查询</button></li>
      </ul>
      </form>
    </div>
     <!---->
     <!-- <div class="border clearfix">
       <span class="l_f">
        <a href="javascript:ovid()" class="btn btn-danger"><i class="icon-trash"></i>批量删除</a>
       </span>
     </div> -->
     <form id="pageIndexFrom">
      	<div>每页显示条数:&nbsp;&nbsp;&nbsp;&nbsp;
		    <select style="width: 4%" id="seleIndex" name="pageSize" onchange="changepageSize()">
		    	<option>3</option>
		    	<option>5</option>
		    	<option>10</option>
		    </select>
    	</div>
    	<br />
     <!---->
     <div class="table_menu_list">
       <table class="table table-striped table-bordered table-hover" id="sample-table">
		<thead>
		 <tr>
				<th width="25"><label><input type="checkbox" class="ace" id="checkAll" /><span class="lbl"></span></label></th>
				<th width="80">编号</th>
				<th width="100">用户名</th>
				<th width="150">邮箱</th>
				<th width="120">手机</th>
				<th width="120">真实姓名</th>
				<th width="">地址</th>
				<th width="180">信用度</th>
                <th width="100">资产等级</th>               
				<th width="250">操作</th>
			</tr>
		</thead>
	 	<tbody id="tbody"></tbody>
        <tfoot id="template" style="display: none;">
        	<tr align="center" class="d">
	             <td><input type="checkbox" value="" class="ch" name="typeId" /></td>
	             <td class="customer_id">{customer_id}</td>
	             <td>{customer_name}</td>
	             <td>{eMail}</td>
	             <td>{telephone}</td>
	             <td>{realName}</td>
	             <td>{address}</td>
	             <td>{credit}</td>
	             <td>{assetLv}</td>
	             <td class="td-manage">
		          <a href="javascript:;" title="停用" onclick="member_stop(this);" class="btn btn-xs btn-success"><i class="icon-ok bigger-120"></i></a> 
		          <a title="删除" href="a_customerServlet?opr=del&customer_id={customer_id}"  onclick="return confirm('你确定要删除吗?')" class="btn btn-xs btn-warning" ><i class="icon-trash  bigger-120"></i></a>
		         </td>
          	</tr>
        </tfoot>
	</table><br />
     	 <input type="hidden" name="pageIndex" id="pageIndexs"/>
	     <div style="width: 550px; margin: 0 auto;">
	    	当前<span id="pageIndex1">{pageIndex}</span>/<span id="pageCount1">{pageCount}</span>页，
	    	每页显示<span id="pageSize1">{pageSize}</span>条记录，共<span id="totalCount1">{totalCount}</span>条记录&nbsp;&nbsp;
	  		<button type="button" onclick="shouye()" class="btn btn-xs btn-warning" >首页</button>
	  		<button type="button" onclick="shangyiye()" class="btn btn-xs btn-success">上一页</button>
	  		<button type="button" onclick="xiayiye()"  class="btn btn-xs btn-info order_detailed">下一页</button>
	  		<button type="button" onclick="moye()" class="btn btn-xs btn-warning" >末页</button>
	  	</div>
	  </form>
   </div>
  </div>
 </div>
</div>
<!--添加用户图层-->
<div class="add_menber" id="add_menber_style" style="display:none">
  
    <ul class=" page-content">
     <li><label class="label_name">用&nbsp;&nbsp;户 &nbsp;名：</label><span class="add_name"><input value="" name="用户名" type="text"  class="text_add"/></span><div class="prompt r_f"></div></li>
     <li><label class="label_name">真实姓名：</label><span class="add_name"><input name="真实姓名" type="text"  class="text_add"/></span><div class="prompt r_f"></div></li>
     <li><label class="label_name">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</label><span class="add_name">
     <label><input name="form-field-radio" type="radio" checked="checked" class="ace"><span class="lbl">男</span></label>&nbsp;&nbsp;&nbsp;
     <label><input name="form-field-radio" type="radio" class="ace"><span class="lbl">女</span></label>&nbsp;&nbsp;&nbsp;
     <label><input name="form-field-radio" type="radio" class="ace"><span class="lbl">保密</span></label>
     </span>
     <div class="prompt r_f"></div>
     </li>
     <li><label class="label_name">固定电话：</label><span class="add_name"><input name="固定电话" type="text"  class="text_add"/></span><div class="prompt r_f"></div></li>
     <li><label class="label_name">移动电话：</label><span class="add_name"><input name="移动电话" type="text"  class="text_add"/></span><div class="prompt r_f"></div></li>
     <li><label class="label_name">电子邮箱：</label><span class="add_name"><input name="电子邮箱" type="text"  class="text_add"/></span><div class="prompt r_f"></div></li>
     <li class="adderss"><label class="label_name">家庭住址：</label><span class="add_name"><input name="家庭住址" type="text"  class="text_add" style=" width:350px"/></span><div class="prompt r_f"></div></li>
     <li><label class="label_name">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</label><span class="add_name">
     <label><input name="form-field-radio1" type="radio" checked="checked" class="ace"><span class="lbl">开启</span></label>&nbsp;&nbsp;&nbsp;
     <label><input name="form-field-radio1"type="radio" class="ace"><span class="lbl">关闭</span></label></span><div class="prompt r_f"></div></li>
    </ul>
 </div>
</body>
</html>
<script>
/* jQuery(function($) {
				var oTable1 = $('#sample-table').dataTable( {
				"aaSorting": [[ 1, "desc" ]],//默认第几个排序
		"bStateSave": true,//状态保存
		"aoColumnDefs": [
		  //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
		  {"orderable":false,"aTargets":[0,8,9]}// 制定列不参与排序
		] } );
				
				
				$('table th input:checkbox').on('click' , function(){
					var that = this;
					$(this).closest('table').find('tr > td:first-child input:checkbox')
					.each(function(){
						this.checked = that.checked;
						$(this).closest('tr').toggleClass('selected');
					});
						
				});
			
			
				$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
				function tooltip_placement(context, source) {
					var $source = $(source);
					var $parent = $source.closest('table')
					var off1 = $parent.offset();
					var w1 = $parent.width();
			
					var off2 = $source.offset();
					var w2 = $source.width();
			
					if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
					return 'left';
				}
			}) */
/*用户-添加*/
 $('#member_add').on('click', function(){
    layer.open({
        type: 1,
        title: '添加用户',
		maxmin: true, 
		shadeClose: true, //点击遮罩关闭层
        area : ['800px' , ''],
        content:$('#add_menber_style'),
		btn:['提交','取消'],
		yes:function(index,layero){	
		 var num=0;
		 var str="";
     $(".add_menber input[type$='text']").each(function(n){
          if($(this).val()=="")
          {
               
			   layer.alert(str+=""+$(this).attr("name")+"不能为空！\r\n",{
                title: '提示框',				
				icon:0,								
          }); 
		    num++;
            return false;            
          } 
		 });
		  if(num>0){  return false;}	 	
          else{
			  layer.alert('添加成功！',{
               title: '提示框',				
			icon:1,		
			  });
			   layer.close(index);	
		  }		  		     				
		}
    });
});
/*用户-查看*/
function member_show(title,url,id,w,h){
	layer_show(title,url+'#?='+id,w,h);
}
/*用户-停用*/
function member_stop(obj,id){
	layer.confirm('确认要停用吗？',function(index){
		$(obj).parents("tr").find(".ch").prop("checked",false).attr("disabled","disabled");
		$(obj).next().remove();
		$(obj).after(' <a title="删除"  class="btn btn-xs btn-warning" ><i class="icon-trash  bigger-120"></i></a>');
		$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs " onClick="member_start(this,id)" href="javascript:;" title="启用"><i class="icon-ok bigger-120"></i></a>');
		$(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已停用</span>');
		$(obj).remove();
		layer.msg('已停用!',{icon: 5,time:1000});
	});
}

/*用户-启用*/
function member_start(obj,id){
	layer.confirm('确认要启用吗？',function(index){
		$(obj).parents("tr").find(".ch").removeAttr("disabled");
		$(obj).next().remove();
		$(obj).after(' <a title="删除" href="a_customerServlet?opr=del&customer_id='+$(obj).parents("tr").find(".customer_id").html()+'"  onclick="return confirm(\'你确定要删除吗?\')" class="btn btn-xs btn-warning" ><i class="icon-trash  bigger-120"></i></a>');
		$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs btn-success" onClick="member_stop(this,id)" href="javascript:;" title="停用"><i class="icon-ok bigger-120"></i></a>');
		$(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
		$(obj).remove();
		layer.msg('已启用!',{icon: 6,time:1000});
	});
}
/*用户-编辑*/
function member_edit(id){
	  layer.open({
        type: 1,
        title: '修改用户信息',
		maxmin: true, 
		shadeClose:false, //点击遮罩关闭层
        area : ['800px' , ''],
        content:$('#add_menber_style'),
		btn:['提交','取消'],
		yes:function(index,layero){	
		 var num=0;
		 var str="";
     $(".add_menber input[type$='text']").each(function(n){
          if($(this).val()=="")
          {
               
			   layer.alert(str+=""+$(this).attr("name")+"不能为空！\r\n",{
                title: '提示框',				
				icon:0,								
          }); 
		    num++;
            return false;            
          } 
		 });
		  if(num>0){  return false;}	 	
          else{
			  layer.alert('添加成功！',{
               title: '提示框',				
			icon:1,		
			  });
			   layer.close(index);	
		  }		  		     				
		}
    });
}
/*用户-删除*/
function member_del(obj,id){
	layer.confirm('确认要删除吗？',function(index){
		$(obj).parents("tr").remove();
		layer.msg('已删除!',{icon:1,time:1000});
	});
}
laydate({
    elem: '#start',
    event: 'focus' 
});
		/*抓数据库数据*/
		$(function(){
			query();
		});
    	function query(){
    		$.ajax({
    			cache: false,
				type: "POST",
				url:"a_customerServlet",
				dataType:"json",
				data:$('#pageIndexFrom').serialize(),
				async: false,
				error: function(request) {
					alert("发送请求失败！");
				},
				success:function(data){
					var template=$("#template").html();
					var html=[];
					$("#tbody").html("");
					if(data.list.length>0){
						$.each(data.list,function(i,ele){
							var tr=template;
							tr=tr.replace(/{customer_id}/g,ele.customer_id);
							tr=tr.replace(/{customer_name}/,ele.customer_name);
							tr=tr.replace(/{eMail}/,ele.eMail);
							tr=tr.replace(/{telephone}/,ele.telephone);
							tr=tr.replace(/{realName}/,ele.realName);
							tr=tr.replace(/{address}/,ele.address);
							tr=tr.replace(/{credit}/,ele.credit);
							tr=tr.replace(/{assetLv}/,ele.assetLv.assetLv_name);
							html.push(tr);
						});
					}else{
						html.push('<tr><td colspan="10" align="center"><font color="red">没有找到数据</font></td></tr>');
					}
					$("#tbody").append(html.join(""));
					$("#pageIndex1").html(data.pageIndex);
					$("#pageCount1").html(data.pageCount);
					$("#pageSize1").html(data.pageSize);
					$("#totalCount1").html(data.totalCount);
				}
			});
    	};
    	function shouye(){
    		$("#pageIndexs").val(1);
    		query();
    	};
    	function shangyiye(){
    		$("#pageIndexs").val(($("#pageIndex1").html()-1)<=0?1:$("#pageIndex1").html()-1);
    		query();
    	};
    	function xiayiye(){
    		var page1 = parseInt($("#pageIndex1").html())+1;
    		var pageCount1 = parseInt($("#pageCount1").html());
    		$("#pageIndexs").val(page1>=pageCount1?pageCount1:page1);
    		query();
    	};
    	function moye(){
    		$("#pageIndexs").val($("#pageCount1").html());
    		query();
    	};
    	function doFind(){
			$.ajax({
				cache: false,
				type: "POST",
				url:"a_customerServlet", 
				dataType:"json",
				data:$('#ajaxFrm').serialize(),
				async: false,
				error: function(request) {
					alert("发送请求失败！");
				},
				success: function(data) { 
					var template=$("#template").html();
					var html=[];
					$("#tbody").html("");
					if(data.list.length>0){
						$.each(data.list,function(i,ele){
							var tr=template;
							tr=tr.replace(/{customer_id}/g,ele.customer_id);
							tr=tr.replace(/{customer_name}/,ele.customer_name);
							tr=tr.replace(/{eMail}/,ele.eMail);
							tr=tr.replace(/{telephone}/,ele.telephone);
							tr=tr.replace(/{realName}/,ele.realName);
							tr=tr.replace(/{address}/,ele.address);
							tr=tr.replace(/{credit}/,ele.credit);
							tr=tr.replace(/{assetLv}/,ele.assetLv.assetLv_name);
							html.push(tr);
						});
					}else{
						html.push('<tr><td colspan="10" align="center"><font color="red">没有找到数据</font></td></tr>');
					}
					$("#tbody").append(html.join(""));
					$("#pageIndex1").html(data.pageIndex);
					$("#pageCount1").html(data.pageCount);
					$("#pageSize1").html(data.pageSize);
					$("#totalCount1").html(data.totalCount);
				}
			});
		};
		
		function changepageSize(){
			query();
		}
</script>
